<template>
  <v-container fluid>
    <v-row>
      <v-col>
        <v-toolbar flat color="secondary">
          <v-toolbar-title>修改产品</v-toolbar-title>
          <v-spacer></v-spacer>
          <v-btn icon @click="submitAdd()">
            <v-icon>mdi-check</v-icon>
          </v-btn>
        </v-toolbar>
      </v-col>
    </v-row>
    <v-progress-linear
        indeterminate
        color="primary"
        v-if="loading"
    ></v-progress-linear>
    <v-form ref="form1" class="full-width px-3">
      <v-row>
        <v-col sm="4" cols="12">
          <v-text-field
              label="产品名称"
              v-model="form.title"
              :rules="[rules.required,rules.maxLength(40)]"
              :counter="40"
          ></v-text-field>
        </v-col>
        <v-col sm="4" cols="12">
          <v-select
              label="品牌"
              v-model="form.brand"
              :items="brands"
              item-text="valueName"
              item-value="value"
          ></v-select>
        </v-col>
        <v-col sm="4" cols="12">
          <v-select
              label="产品类型"
              v-model="form.type"
              :items="types"
              item-text="valueName"
              item-value="value"
          ></v-select>
        </v-col>
        <v-col sm="4" cols="12">
          <v-text-field
              label="产品规格"
              v-model="form.size"
              :rules="[rules.required,rules.maxLength(30)]"
              :counter="30"
          ></v-text-field>
        </v-col>
        <v-col sm="4" cols="12">
          <v-text-field
              label="产品参考价格"
              prefix="￥"
              type="number"
              v-model="form.price"
              :rules="[rules.required,rules.maxLength(20)]"
          ></v-text-field>
        </v-col>
        <v-col sm="4" cols="12">
          <v-select
              label="产品适合肤质"
              v-model="form.forSkin"
              multiple
              :items="skinTypes"
              item-text="valueName"
              item-value="value"
              hint="默认适合所有肤质"
          ></v-select>

        </v-col>
        <v-col sm="4" cols="12">
          <v-textarea
              label="产品主要功效"
              v-model="form.usage"
              :rules="[rules.maxLength(50)]"
              :counter="50"
          ></v-textarea>
        </v-col>
        <v-col sm="8" cols="12">
          <my-image-upload
              @onUpdate="onImgUpdate"
              :initImgs="this.oldPics"
          >

          </my-image-upload>
        </v-col>

      </v-row>
    </v-form>
    <v-overlay :value="overlay">
      <v-progress-circular
          indeterminate
          size="80"
      ></v-progress-circular>
      <v-card-text class="text-center px-0">正在保存</v-card-text>
    </v-overlay>
  </v-container>
</template>

<script>
import {printMsg, rules} from "../../util/util";
import MyImageUpload from "../../components/MyImageUpload";
import {simpleCopy} from "../../util/util";

export default {
  name: "EditProduction",
  components: {MyImageUpload},
  data: () => ({
    rules: rules,
    form: {
      pid:'',
      title: '',
      brand: '',
      type: '',
      size: '',
      price: '',
      usage: '',
      forSkin: [],
      pictures: [],
    },
    newPics:[],
    oldPics:[],
    skinTypes: [],
    types: [],
    brands: [],
    pictures: [],
    overlay: false,
    loading:false
  }),
  methods: {
    getKeyValues(key, store) {
      let data = {
        key: key
      }
      this.$http.post('constant/listConstant', data).then(res => {
        this[store] = res.data[0].values
      }).catch(res => {
        this[store] = []
      })
    },
    onImgUpdate(imgs) {
      if (imgs.new) {
        printMsg('new images: ' + imgs.new,this)
      }
      if (imgs.old) {
        printMsg('old images: ' + imgs.old,this)
      }
      this.newPics = imgs.new
    },
    submitAdd() {
      this.overlay = true
      if (this.newPics.length > 0) {
        let data = {base64Files: this.newPics}
        this.$http.post('file/saveImages', data).then(res => {
          this.newPics = res.data.map(a => a.fileName).join(',')
          this.form.pictures = [this.oldPics.join(','),this.newPics].join(',')
          this.doCommit()
        }).catch(res => {
          this.overlay = false
          printMsg(res.msg,this)
        })
      } else {
        this.form.pictures = this.oldPics.join(',')
        this.doCommit()
      }
    },
    doCommit() {
      printMsg("准备提交的数据：",this)
      printMsg(this.form,this)
      if (this.form.forSkin.length === 0) {
        this.form.forSkin = this.skinTypes.map(a => a.value)
      }else{
        this.form.forSkin = this.skinTypes.map(a => a.value).filter(a=>this.form.forSkin.indexOf(a)!==-1)
      }
      this.form.forSkin = this.form.forSkin.join(',')

      let data = this.form
      this.$http.post('production/updateProduction', data).then(res => {
        this.$emit('toast',"修改成功")
        this.$emit('closeTab',{title:'修改产品',route:'/admin/editProduction'})
        this.overlay = false
      }).catch(res => {
        this.$emit("toast",res.msg)
        this.overlay = false
      })
    },
    getProductions() {
      this.loading = true
      let data = {pid:this.form.pid}
      this.$http.post('production/listProduction', data).then(res => {
        res.data = res.data[0]
        if (res.data.pictures){
          res.data.pictures = res.data.pictureList
        }
        if (res.data.forSkin){
          res.data.forSkin = res.data.forSkin.split(",")
        }
        simpleCopy(res.data,this.form)
        this.oldPics = res.data.pictures
        this.loading = false
      }).catch(res => {
        this.$emit("toast",res.msg)
        this.loading = false
      })
    },
  },
  mounted() {
    this.getKeyValues('skinType', 'skinTypes')
    this.getKeyValues('productionType', 'types')
    this.getKeyValues('productionBrand', 'brands')
  },
  beforeMount() {
    this.form.pid = this.$route.query.pid
    this.getProductions()
  }
}
</script>

<style scoped>

</style>
